<template>
  <el-main>
    <el-button type="success" icon="el-icon-plus" @click="openEditWindow">新增</el-button>

    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%;margin-top: 20px"
      row-key="id"
      height="775"
      :expand-row-keys="expandRowKeys"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="label"
        label="菜单名称"
        width="180"
      />
      <el-table-column
        prop="type"
        label="菜单类型"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type===0" type="primary">目录</el-tag>
          <el-tag v-if="scope.row.type===1" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.type===2" type="danger">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="icon"
        align="center"
        label="图标"
      >
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="font-size: 20px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="路由名称"
      />
      <el-table-column
        prop="path"
        align="center"
        label="路由地址"
      />
      <el-table-column
        prop="url"
        align="center"
        label="组件路径"
      />
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-close" size="small" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <system-dialog
      :title="menuDialog.title"
      :visible="menuDialog.visible"
      :width="menuDialog.width"
      :height="menuDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          ref="editMenuForm"
          :model="editMenuForm"
          :rules="editMenuRoles"
          label-width="100px"
          :inline="true"
          size="small"
        >
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="editMenuForm.type" size="mini">
              <el-radio :label="0" border>目录</el-radio>
              <el-radio :label="1" border>菜单</el-radio>
              <el-radio :label="2" border>按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="editMenuForm.type!==0" label="所属菜单" prop="parentId">
            <el-cascader
              ref="refSubCat"
              v-model="editMenuForm.parentId"
              :options="parentMenuOptions"
              style="width: 184px"
              :show-all-levels="false"
              :props="menuCascaderProps"
              @change="orgChange"
            />
          </el-form-item>
          <el-form-item label="菜单名称" prop="label">
            <el-input v-model="editMenuForm.label" autocomplete="off" />
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <!--            <el-input v-model="editMenuForm.icon" autocomplete="off" />-->
            <el-select v-model="editMenuForm.icon" placeholder="请选择" style="width: 185px">
              <el-option
                v-for="item in icons"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left;font-size: 24px">
                  <i :class="item.name" />
                </span>
                <span style="float: right; color: #8492a6; font-size: 11px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="editMenuForm.type!==2" label="路由名称" prop="name">
            <el-input v-model="editMenuForm.name" autocomplete="off" />
          </el-form-item>
          <el-form-item v-if="editMenuForm.type!==2" label="路由地址" prop="path">
            <el-input v-model="editMenuForm.path" autocomplete="off" />
          </el-form-item>
          <el-form-item v-if="editMenuForm.type===1" label="组件路径" prop="url">
            <el-input v-model="editMenuForm.url" autocomplete="off" />
          </el-form-item>
          <el-form-item label="权限字段" prop="code">
            <el-input v-model="editMenuForm.code" autocomplete="off" />
          </el-form-item>
          <el-form-item label="菜单序号" prop="order">
            <!--            <el-input v-model="editMenuForm.order" autocomplete="off" />-->
            <el-input-number v-model="editMenuForm.order" :min="0" :max="100" style="width: 185px" />
          </el-form-item>

        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>
<script>
import { checkPermission, deletePermission, getPermission, getPermissionsTree, savePermission } from '@/api/permission'
import systemDialog from '@/components/system/SystemDialog.vue'
import myConfirm from '@/utils/myconfirm'

export default {
  components: {
    systemDialog
  },
  data() {
    return {
      tableLoading: false,
      menuCascaderProps: {
        checkStrictly: true,
        value: 'id',
        label: 'label',
        children: 'children',
        expandTrigger: 'hover'
      },
      tableData: [],
      expandRowKeys: [],
      editMenuForm: {
        type: 0,
        order: 0
      },
      menuDialog: {
        title: '编辑',
        visible: false,
        width: 650,
        height: 255
      },
      parentMenuOptions: [],
      editMenuRoles: {
        type: [{ required: true, trigger: 'change', message: '请选择菜单类型' }],
        parentId: [{ required: true, trigger: 'blur', message: '请选择所属菜单' }],
        label: [{ required: true, trigger: 'blur', message: '请输入菜单名称' }],
        name: [{ required: true, trigger: 'blur', message: '请输入路由名称' }],
        path: [{ required: true, trigger: 'blur', message: '请输入路由地址' }],
        url: [{ required: true, trigger: 'blur', message: '请输入组件路径' }],
        code: [{ required: true, trigger: 'blur', message: '请输入权限字段' }],
        order: [{ required: true, trigger: 'blur', message: '请输入菜单序号' }]
      },
      icons: [{
        id: 1,
        name: 'el-icon-platform-eleme'
      }, {
        id: 2,
        name: 'el-icon-eleme'
      },
      {
        id: 3,
        name: 'el-icon-delete-solid'
      }
      ]
    }
  },
  created() {
    this.getPermissionsTree()
  },
  methods: {
    edit(id) {
      getPermission(id).then(res => {
        this.editMenuForm = res.data
        this.editMenuForm.order = res.data.sort
        this.openEditWindow()
      })
    },
    orgChange() {
      this.editMenuForm.parentName = this.$refs['refSubCat'].getCheckedNodes()[0].label
      this.editMenuForm.parentId = this.$refs['refSubCat'].getCheckedNodes()[0].value
      this.$refs.refSubCat.dropDownVisible = false
    },
    getParentMenu() {
      this.parentMenuOptions = this.tableData
    },
    openEditWindow() {
      this.menuDialog.visible = true
      this.getParentMenu()
    },
    getPermissionsTree() {
      this.tableLoading = true
      getPermissionsTree().then(res => {
        this.tableData = res.data
        this.getExpandRowKeys(res.data, 0)
        this.tableLoading = false
      })
    },
    getExpandRowKeys(permissions, parentId) {
      permissions.forEach(item => {
        if (item.parentId === parentId) {
          if (item.type === 0) {
            this.expandRowKeys.push(item.id + '')
          }
          this.getExpandRowKeys(permissions, item.id)
        }
      })
    },
    clearEditWindow() {
      this.menuDialog.visible = false
      this.editMenuForm = {
        type: 0,
        order: 0
      }
      this.$refs['editMenuForm'].resetFields()
    },
    onClose() {
      this.clearEditWindow()
    },
    onConfirm() {
      this.$refs.editMenuForm.validate(valid => {
        if (valid) {
          // 如果是目录类型的菜单信息，则自动填充父级信息
          if (this.editMenuForm.type === 0) {
            this.editMenuForm.parentId = 0
            this.editMenuForm.parentName = '顶级菜单'
          }
          this.editMenuForm.sort = this.editMenuForm.order
          savePermission(this.editMenuForm).then(res => {
            this.menuDialog.visible = false
            this.clearEditWindow()
            this.getPermissionsTree()
          })
        }
      })
    },
    async remove(id) {
      const result = await myConfirm('确定删除吗')
      if (result) {
        checkPermission(id).then(res => {
          this.deleteById(id)
        })
      }
    },
    deleteById(id) {
      deletePermission(id).then(res => {
        this.getPermissionsTree()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>

// 当使用了 checkStrictly 就会出现单选按钮，使用样式修改即可
<style rel="stylesheet/less">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}

.el-cascader-panel .el-radio__input {
  visibility: hidden;
}

.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
